import { Affix, Layout,Row,Col, Menu } from "antd"
import MenuItem from "antd/lib/menu/MenuItem"
import { Link, useLocation } from "react-router-dom"
import {nav} from '../router/index'


function Header() {
    let {pathname}=useLocation
    let activeKey=nav.findIndex((item)=>{
        return pathname===item.to
    })
    console.log(activeKey);
    return (
        <Affix offsetTop={0}>
            <Layout.Header id='header'>
               <div className='wrap'>
                   <Row>
                       <Col xs={6} sm={4} md={2}>
                           <h1 className='logo'><Link to='/'>CNode</Link></h1>
                       </Col>
                       <Col xs={18} sm={20} md={22}>
                          <Menu mode='horizontal' theme='dark' selectedKeys={[activeKey+'']}>
                           {nav.map((item,index)=>{
                               return   <MenuItem key={index}><Link to={item.to}>{item.text}</Link></MenuItem>
                        
                           })}
                          </Menu>
                       </Col>
                   </Row>
               </div>
            </Layout.Header>
        </Affix>
    )
}

export default Header